<template>
  <el-card shadow="hover">
    <!-- inline 一行显示  disabled动态控制显示和隐藏 -->
    <el-form inline :disabled="disable">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择" v-model="store.category1Id">
          <!--label下拉框显示的内容  value 选中的值  -->
          <el-option
            v-for="c1 in store.category1List"
            :key="c1.id"
            :label="c1.name"
            :value="c1.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" v-model="store.category2Id">
          <el-option
            v-for="c2 in store.category2List"
            :key="c2.id"
            :label="c2.name"
            :value="c2.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" v-model="store.category3Id">
          <el-option
            v-for="c3 in store.category3List"
            :key="c3.id"
            :label="c3.name"
            :value="c3.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "CategorySelector",
});

//当添加组件出现，三级列表禁用
defineProps<{
  disable: boolean;
}>();
import { onMounted, watch } from "vue";
//引入store中的分类模块
import { useCategoryStore } from "@/stores/category";

//store可以访问模块数据
const store = useCategoryStore();
//挂载获取一级数据
onMounted(store.getCategory1List);

//监听一级分类id ，获取二级分类数据
watch(
  () => store.category1Id,
  async () => {
    await store.getCategory2List();
  }
);

//监听二级分类id ，获取三级分类数据
watch(
  () => store.category2Id,
  async () => {
    //没有id就不执行
    if (!store.category2Id) return;
    await store.getCategory3List();
  }
);
</script>

<style scoped lang="scss">
.el-form-item {
  margin: 10px 15px;
}
</style>
